<!-- 
时间 : 2025.01.06:16.40.13
名称 : G_Paging
类型 : 组件
功能 : 分页控制
编码 : 村长有人偷包谷
 -->
<script setup>
import { ref, reactive, onMounted } from 'vue'


const props = defineProps(['Config']);

onMounted(() => {

})

const size = ref('small')

const handleCurrentChange = (val) => {
    console.log(`当前页: ${val}`);
    props.Config.PagingChange(true, val)
}

const handleSizeChange = (val) => {
    console.log(`每页 ${val} 条`);
    props.Config.PagingChange(false, val)
}

</script>

<template>
    <div id='G_Paging'>
        <el-pagination class="pagination" v-model:current-page="props.Config.current"
            v-model:page-size="props.Config.pageSize" :page-sizes="props.Config.pageSizes" :size="size"
            layout="total, sizes, prev, pager, next, jumper" :total="Number(props.Config.total)" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
</template>

<style lang='less' scoped>
#G_Paging {
    display: flex;
    justify-content: right;
    margin-top: 16px;

    .pagination {
        
        flex-wrap: wrap;
    }
}
</style>